<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="btn1">111</button>
  <script>
    //绑定事件的方式

    //1.获取dom对象
    var btn1 = document.getElementById("btn1");

    //2.根据需求给dom对象绑定对应的事件（触发变化的有条件）
    btn1.onclick = function () {
      console.log(111);
    }
    btn1.addEventListener('click', function () {
      console.log(222);
    }, false)


    var fn = function () {
      console.log(333);
    }
    btn1.addEventListener('click', fn, false);
    btn1.removeEventListener('click', fn, false)
    // 事件源：谁出发了该事件谁就是事件源，给谁绑定事件谁就是事件源
    // 事件处理函数：出发该事件的时候都做什么
    // 事件对象：
  </script>
</body>

</html>